<script setup lang="ts">
import type { Notice, NoticeQuery } from '@/apis/system/noticeApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { noticeApi, NoticeStates } from '@/apis/system/noticeApi'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'

const router = useRouter()
function jump(row: Notice) {
  if (row.link) {
    router.push(row.link)
  }
}

const {
  submitQuery,
  QueryForm,
  Table: QueryTable,
  TableFieldFilterButton,
} = useTable<NoticeQuery, Notice>({
  autoQuery: true,
  queryPage: query => noticeApi.queryPage(query),
  queryFields: [
    { name: 'projectName', title: '项目名称' },
    { name: 'remark', title: '项目说明' },
    { name: 'basePackage', title: '项目包名' },
    { name: 'moduleName', title: '模块名称' },
    { name: 'moduleCode', title: '模块编码' },

    { title: 'ID', name: 'id' },
    { title: '标题', name: 'title' },
    { title: '内容', name: 'content' },
    { title: '状态', name: 'state', options: [...NoticeStates] },
    { title: '时间', name: 'updateTime' },
  ],
  tableFields: [

    { title: 'ID', name: 'id', width: 80, fieldType: 'KEY', sort: true },
    { title: '标题', name: 'title', width: 100, fieldType: 'MAIN', sort: false },
    { title: '内容', name: 'content', width: 180, sort: false },
    { title: '状态', name: 'state', width: 90, options: [...NoticeStates] },
    { title: '时间', name: 'updateTime', width: 180, show: true, sort: true, align: 'center' },
  ],
})

const actions = reactive<Record<string, DataAction>>({
  link: {
    label: '链接',
    type: 'primary',
    click: data => jump(data),
  },
  modify: {
    label: row => row.state === 'READ' ? '未读' : '已读',
    type: 'warning',
    click: row => noticeApi.modifyState({ id: row.id!, state: row.state === 'READ' ? 'UNREAD' : 'READ' }),
    success: () => submitQuery(),
  },
  remove: {
    label: '删除',
    type: 'danger',
    confirm: '删除项目不可恢复，请谨慎确认',
    click: data => noticeApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
})
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <QueryTable :row-actions="[actions.link, actions.modify, actions.remove]">
      <template #content="{ row }">
        <div style="max-height: 100px;" class="break-all text-wrap">
          {{ row.content }}
        </div>
      </template>
    </QueryTable>
  </BaseCard>
</template>
